<!DOCTYPE HTML>
<style>
  ::-webkit-scrollbar {
    width: 0px;
    height: 0px;
  }
  html, body {
    margin: 0;
    border: 0;
    padding:0 ;
    height: 100%;
    overflow: hidden;
  }
  .overflow {
    overflow-x: hidden;
    overflow-y: scroll;
    background: #EDEDED;
    width: 100%;
    height: 100%;
    position: relative;
    -webkit-overflow-scrolling: touch;
  }
  .thumb {
    width: 68px;
    background-image: url('cat.gif'), linear-gradient(90deg, transparent, magenta, red, yellow, limegreen, turquoise, blue, magenta, transparent);
    background-position: center bottom, center -40px;
    background-repeat: no-repeat, no-repeat;
    background-size: contain, contain;
  }

  .fakecontent {
    padding: 25vh 0;
    border: 1px solid transparent;
  }
</style>
<main class="glider-scrollable overflow">
  <div class="fakecontent">Lorem</div>
  <div class="fakecontent">ipsum</div>
  <div class="fakecontent">dolor</div>
  <div class="fakecontent">sit</div>
  <div class="fakecontent">amet,</div>
  <div class="fakecontent">consectetur</div>
  <div class="fakecontent">adipiscing</div>
  <div class="fakecontent">elit</div>
</main>
<script src="scrollbar.js"></script>
